<template>
    <div class="login-wrap">
        <div class="i18n-wrap">
            <AppTopBar_I18nEntry />
        </div>
        <section class="login-container">
            <el-card class="sim-el-card">
                <template #header>
                    <div class="card-header">
                        <p class="title">
                            <i class="svg-user"></i>
                            <span>{{ $t('Login') }}</span>
                        </p>
                        <p class="tip">
                            {{ $t('Welcome to the event listening system!') }}
                        </p>
                    </div>
                </template>
                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100px" label-position="top"
                    class="sim-sedc-ruleForm" size="large" status-icon @keyup.enter="submitLogin(ruleFormRef)">
                    <el-form-item prop="userName">
                        <template #label>
                            <span>{{ $t('userName') }}</span>
                        </template>
                        <el-col>
                            <el-input v-model.trim="ruleForm.userName" aria-placeholder="username" />
                        </el-col>
                    </el-form-item>

                    <el-form-item prop="passWord">
                        <template #label>
                            <span>{{ $t('passWord') }}</span>
                        </template>
                        <el-input v-model="ruleForm.passWord" type="password" aria-placeholder="password" />
                    </el-form-item>
                </el-form>

                <!-- <el-row>
                        <el-checkbox v-model="checked" name="type"
                                     v-bind:label="$t('Remember password')" />
                </el-row> -->

                <el-row>
                    <el-col>
                        <el-button @click="submitLogin(ruleFormRef)" type="primary" size="large">
                            {{ $t('登录') }}
                        </el-button>
                        <!-- <el-button @click="submitLogin(0)">匿名登录</el-button> -->
                    </el-col>
                </el-row>
            </el-card>
        </section>
    </div>
</template>

<script lang="ts" setup>

import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import router from '@/vue-router'

import { i18n } from '@/vue-i18n'
const $t = i18n.global.t

import { userConfig } from '@/pages/pinia/user/index'
const userConfigStore = userConfig()

const ruleFormRef = ref<FormInstance>()

let checked = ref(false)

let ruleForm = reactive({
    userName: '',
    passWord: '',
})

const rules = reactive<FormRules>({
    userName: [
        { required: true, message: $t('Please input a valid name'), trigger: 'blur' },
        { min: 3, max: 20, message: $t('User name should be 3 to 20'), trigger: 'blur' },
        {
            pattern: /^[0-9a-zA-Z\u4E00-\u9FA5\_]/,
            message: $t('The user name cannot contain special characters'),
            trigger: 'blur'
        }
    ],
    passWord: [
        {
            required: true,
            message: $t('Please input a valid password'),
            trigger: 'blur',
        },
        { min: 3, max: 16, message: $t('Password should be 3 to 16'), trigger: 'blur' },
    ],
})

const submitLogin = async function (formEl: FormInstance | undefined) {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            userConfigStore.login({
                remmemberMe: checked.value,
                userName: ruleForm.userName,
                passWord: ruleForm.passWord,
            }).then(() => {
                router.replace('/')
                
            }).catch(error => {
                ElMessage({
                    type: 'error',
                    message: error.message || $t('login error'),
                })
            })
        } else {
            if (fields?.userName?.length) {
                ElMessage({
                    type: 'error',
                    message: $t("Please input a valid name")
                });
            }
            if (fields?.passWord?.length) {
                ElMessage({
                    type: 'error',
                    message: $t("Please input a valid password")
                });
            }
        }
    })
}
</script>

<style lang="scss" scoped>
.login-wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-align: center;
    background: #0D1539;

    .login-container {
        position: absolute;
        width: 560px;
        min-height: 200px;
        max-height: calc(100vh - 180px);
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    :deep(.el-card) {
        border: 0;
        background-color: transparent;
        box-shadow: none;
    }

    :deep(.el-card__header) {
        padding: 0;
        border-bottom: 0;
        text-align: center;
        font-size: 16px;
        color: #92929D;

        .title {
            padding-bottom: 19px;
            color: #FAFAFB;
            text-align: center;
            font-family: Poppins;
            font-size: 56px;
            font-style: normal;
            font-weight: 700;
            line-height: 76px;
            /* 135.714% */
            letter-spacing: 0.233px;
        }
    }

    :deep(.el-card__body) {
        margin-top: 40px;
        padding: 30px;
        border-radius: 20px;
        background: #1C1C24;
    }

    :deep(.el-button) {
        width: 100%;
    }

    :deep(.el-input__wrapper) {
        border-radius: 6px;
        background-color: transparent;
        box-shadow: 0 0 0 1px #50B5FF;
    }

    :deep(.el-input__inner) {
        color: #92929D;
    }

    :deep(.el-checkbox) {
        color: #FAFAFB;
    }

    :deep(.el-button--primary) {
        background-color: #1E75FF;
    }
}
</style>
<style lang="scss">
.login-wrap {
    .el-form--large.el-form--label-top .el-form-item {
        .el-form-item__label {
            position: relative;
            margin-bottom: -9px;
            padding-left: 18px;

            &::after {
                position: absolute;
                z-index: 1;
                left: 18px;
                content: "";
                width: 100px;
                height: 20px;
                background-color: #1C1C24;
            }

            span {
                position: relative;
                z-index: 3;
                color: #50B5FF;
            }
        }

        &.is-error {
            .el-form-item__label {
                span {
                    color: var(--el-color-danger);
                }
            }
        }
    }

    .i18n-wrap {
        display: flex;
        justify-content: flex-end;
        padding: 30px;
        color: #fff;
    }
}
</style>